<template>
  <div>
    <el-card shadow="never">
      <el-form ref="carForm" :model="pageData">
        <el-row>
          <el-col :span="8">
            <el-form-item label="司机账号:" label-width="100px" prop="id">
              <el-input v-model="pageData.account" placeholder="请输入司机账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机姓名:" label-width="100px" prop="name">
              <el-input v-model="pageData.name" placeholder="请输入司机姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机手机号:" label-width="100px" prop="phone">
              <el-input v-model="pageData.phone" placeholder="请输入司机手机"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="所属机构：" prop="name" label-width="100px" style="margin-bottom: 0">
              <treeselect
                :appendToBody="true"
                v-model="pageData.agentId"
                :options="deptOptions"
                :normalizer="normalizer"
                placeholder="请诜择所属机构"/>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-button type="primary" @click="getTable" style="padding-left: 20px">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px;">
      <el-table :data="tableData" :stripe="true" style="width: 100%;border: 1px solid #eee;margin-top: 20px">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="account" label="司机账号"></el-table-column>
        <el-table-column prop="name" label="司机姓名" ></el-table-column>
        <el-table-column prop="mobile" label="司机手机号" ></el-table-column>
        <el-table-column prop="truck.licensePlate" label="关联车辆" ></el-table-column>
        <el-table-column prop="agency.name" label="所属机构"></el-table-column>
        <el-table-column label="工作状态">
          <template #default="{row}">
            <my-status :text="['下班','上班']" :status="Number(row.workStatus)"></my-status>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" >
          <template #default="{row}">
            <!--                        {{row}}-->
            <el-row>
              <el-button
                type="text"
                size="mini"
                style="color: #62A7F1"
                @click="$router.push(`/transit/vehicle-detail/?id=${row.id}&formUrlName=车辆管理`)">
                查看
              </el-button>
              <span style="color: #eee;margin:0 10px">|</span>
              <el-button
                type="text"
                size="mini"
                style="color: #62A7F1">
                配置司机
              </el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.page"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="padding: 20px;">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { driverData } from '@/api/outletManagement'
import { businessHallTree } from '@/api/business-hall'

export default {
  name: 'operational-range',
  components: { Treeselect },
  data () {
    return {
      tableData: [],
      total: 0,
      pageData: {
        page: 1,
        pageSize: 10
      },
      deptOptions: []
    }
  },
  async created () {
    await this.getTable()
    await this.getTree()
  },
  methods: {
    async getTable () {
      const { data } = await driverData(this.pageData)
      console.log(data)
      this.total = +data.counts
      this.tableData = data.items
    },
    async getTree () {
      const { data } = await businessHallTree()
      const newdata = JSON.parse(data)
      this.deptOptions = newdata
    },
    handleSizeChange (pageSize) {
      this.pageData.pageSize = pageSize
      this.getTable()
    },
    handleCurrentChange (currentPage) {
      this.pageData.page = currentPage
      this.getTable()
    },
    normalizer (node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    reset () {
      this.$refs.carForm.resetFields()
      this.getTable()
    }
  }
}
</script>

<style scoped>

</style>
